

import React,{useState,useEffect} from 'react'
import axios from "axios";

export default function UseEffectDemo() {
  // console.log("UseEffectDemo");
  
  //  定义状态
  const [age,setAge] = useState(12);

  function changeAge(){    
    setAge(age+1);
  }

  //1、 useEffect等价于 componentDidMount，componentDidUpdate
  /*
  useEffect(()=>{    
    console.log("useEffect");
    console.log(document.getElementById("p01").outerHTML);
  })
  */

  const [categorys,setCategorys] = useState([]);

  // 二、第二个参数表示依赖，
  // 1、如果不写，表示依赖所有状态。(任何状态发生变化，都会执行)，等价于componentDidMount和componentDidUpdate
  // useEffect(()=>{
  //   console.log("发送请求");
  //   axios.get("http://121.89.205.189:3000/api/pro/categorylist")
  //   .then(res=>{
  //     if(res.data.code=="200"){
  //       setCategorys(res.data.data);
  //     }
  //   })
  // })

  // 2、空数组，表示没有任何依赖（任何数据发生变化都不会再次执行），等价于componentDidMount
  // useEffect(()=>{
  //   console.log("发送请求");
  //   axios.get("http://121.89.205.189:3000/api/pro/categorylist")
  //   .then(res=>{
  //     if(res.data.code=="200"){
  //       setCategorys(res.data.data);
  //     }
  //   })
  // },[])

  // 3、数组中写上明确的依赖(状态），等价于componentDidMount和指定状态引发的componentDidUpdate

  useEffect(()=>{
    console.log("发送请求");
    axios.get("http://121.89.205.189:3000/api/pro/categorylist")
    .then(res=>{
      if(res.data.code=="200"){
        setCategorys(res.data.data);
      }
    })
  },[age])

  
  return (
    <>
      <div>useEffect</div>
      <p id="p01">age:{age}</p>
      <input type="button" value="修改age" onClick={changeAge} />
      <hr/>
      <ul>
        {
          categorys.map(item=><li key={item}>{item}</li>)
        }
      </ul>
     
    </>
  )
}

